<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>角色编辑</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
    <script type="text/javascript" src="/js/vue.js"></script>
    <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="/css/public.css"/>
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css">
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .div {
            border: 2px solid green;
            width: 300px;
            height: 400px;
            background-color: #d7e0de;
            float: left;
            overflow: auto;
        }

        .divMid {
            width: 60px;
            height: 400px;
            text-align: center;
            float: left;

        }

        li {
            list-style-type: none;
        }
        i{
            font-size: 16px;
            position: relative;
            top: 30%;
            margin-bottom: 40px;
        }
    </style>
</head>
<body>

<div id='my'>

    <!--    右侧div-->
    <div class="div divLeft">
        <div style="width: 100%;background-color: #938ade">
            <h3 style="text-align: center;color: white">已有角色</h3>
        </div>
        <ul style="margin-left: 10px">
            <li v-for="(data,index) in dataLeft">
                <input :value="index" type="checkbox" v-model="check_val_left">
                {{(data==undefined||data==null)?"":data.roleName}}
            </li>
        </ul>
    </div>
    <!--    中间-->
    <div class="divMid">

        <i class="fa fa-arrow-left fa-3x" aria-hidden="false"
           style="color: #6377e0" @click="right_move() "></i>

        <i class="fa fa-arrow-right fa-3x" aria-hidden="false"
           style="color: #ef0419;" @click="left_move() "></i>

    </div>
    <!--    左侧div-->
    <div class="div divLeft">
        <div style="width: 100%;background-color: #938ade">
            <h3 style="text-align: center;color: white">未有角色</h3>
        </div>
        <ul style="margin-left: 10px">
            <li v-for="(data,index) in data_right">
                <input :value="index" type="checkbox" v-model="check_val_right">
                {{(data==undefined||data==null)?"":data.roleName}}
            </li>
        </ul>
    </div>

    <button id="btn" class="layui-btn layui-btn-normal layui-btn-radius"
            style="width:70px ;height: 40px;background-color: #01AAED;text-align: center"
            @click="btn">提交</button>

</div>

</body>
<script type="module">
    var qs = window.Qs;

    var vm =new Vue({
        el: '#my',
        data: {
            dataLeft:[],
            data_right:[],
            check_val_left: [],
            check_val_right: [],
            show: false,
            roleName:''
        },

        mounted(){
            var that = this;
            var userId="";
            var test="";
            test =window.location.href.split("?id=")[1];
            userId=decodeURI(test);
           $.ajax(
                {
                    url:"/selectRoles",
                    type:"get",
                    data: {userId:userId},
                    success:function (msg) {
                        for (let i = 0; i < msg.length; i++) {
                            that.dataLeft.push(msg[i]);
                        }
                    }
                });
            $.ajax(
                {
                    url:"/selectNoRoles",
                    type:"get",
                    data: {userId:userId},

                    success:function (msg) {
                        for (let i = 0; i < msg.length; i++) {
                            that.data_right.push(msg[i]);
                        }
                        console.log(that.data_right);
                    }
                });
        },
        methods: {

            left_move: function () {
                //要把这个数组排序
                this.check_val_left.sort(sortNumber);
                this.check_val_left.forEach((item, index, array) => {
                    //执行代码
                    //console.log(item);
                    //将data_left对应索引的数据移动到右边去
                    this.data_right.push(this.dataLeft[item]);
                    //console.log(this.dataLeft);
                    this.dataLeft.splice(item, 1);
                });
                //忘记把这个数组置空了
                this.check_val_left = [];
            },
            right_move: function () {
                //console.log(this.check_val_right);
                this.check_val_right.sort(sortNumber);
                this.check_val_right.forEach((item, index, array) => {

                    this.dataLeft.push(this.data_right[item]);
                    //console.log(this.dataLeft);
                    this.data_right.splice(item, 1);
                });
                this.check_val_right = [];
            },
            btn:function() {
                var that = this;
                var roles=[];
                roles=this.dataLeft;
                var roleArray= new Array();
                for (let i = 0; i < this.dataLeft.length
                    ; i++) {
                    roleArray.push(this.dataLeft[i]);
                }
                $.ajax({
                    url:"/updateRoles",
                    type:'get',
                    data:{roles:JSON.stringify(roleArray)},//将对象数组转换成json
                    success:function(data)
                    {
                        alert("修改成功");
                        history.back(-1);
                    }
                });

            }

        }
    })

</script>

<script >

    function sortNumber(a, b) {
        return b - a;
    }
</script>

</html>